<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>百度搜索引擎</title>


    <style>
        #box{
            width: 800px;
            height: 600px;
            background-color: #ff3040;

        }
       
    </style>
</head>
<body>
   <input type="text" name="username" id="username">
   <input type="button" value="搜索" id="but">
   <div id="box">  

   </div>
   <script type="text/template" id="tap">
      {{each list as value index}}
            <li>{{value}}</li>
      {{/each}}
   </script>
   <script src="./jquery.min.js"></script>
   <script src="./template.js"></script>

   <script>
       $(function () {
           $("#username").keyup(function () {
             var conn = $('#username').val();
             //console.log(conn)
               $.ajax({  
                   url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
                   type:'get',
                   dataType:'jsonp',
                   jsonp:'cb',
                   data:{
                       wd:conn
                    },
                   success:function(data){
                      // console.log(data)
                       var html = template("tap",{list:data.s})
                       console.log(html);
                       $("#box").html(html)
                   
                   }
               })     
           })           
       })


   </script>
</body>
</html>